//黑导航下拉二维码
var vp_vivo_app_show = $('.vp-vivo-app-show');
$(vp_vivo_app_show[0]).mouseenter(function() {

	$(vp_vivo_app_show[0]).css({
		'background-color': '#8a8f99',
		// 'color':'black !important'
	});
	$(vp_vivo_app_show[0]).next().css('display', 'block')

})
$(vp_vivo_app_show[0]).mouseleave(function() {

	$(vp_vivo_app_show[0]).css({
		'background-color': '#242933',
		'color': '#8a8f99'
	});
	$(vp_vivo_app_show[0]).next().css('display', 'none')

})
$(vp_vivo_app_show[1]).mouseenter(function() {

	$(vp_vivo_app_show[1]).css({
		'background-color': '#8a8f99',
		// 'color':'black !important'
	});
	$(vp_vivo_app_show[1]).next().css('display', 'block')

})
$(vp_vivo_app_show[1]).mouseleave(function() {

	$(vp_vivo_app_show[1]).css({
		'background-color': 'black',
		'color': '#8a8f99'
	});
	$(vp_vivo_app_show[1]).next().css('display', 'none')

})

//vivo切换
var vp_head_logo = $('.vp-head-logo')
vp_head_logo.mouseenter(function() {
	// console.log('--');
	//   vp_head_logo.empty();
	$(`
     <img src="../img/vivo.40de91ac-h.png" alt=""> 
      
      `

	).replaceAll('.vp-head-logo>img')
	//   vp_head_logo.html((`
	//   <img src="../img/vivo.40de91ac-h.png" alt=""> 

	//    `))
})
vp_head_logo.mouseleave(function() {
	// console.log('++');
	// vp_head_logo.empty();
	// vp_head_logo.html((`
	// <img src="../img/vivo.40de91ac.png" alt=""> 

	//  `))
	$(`
     <img src="../img/vivo.40de91ac.png" alt=""> 
      
      `

	).replaceAll('.vp-head-logo>img')
})
//搜索弹框
var vp_head_search_wrap = $('.vp-head-search-wrap'); //弹框
var vp_head_search_open = $('.vp-head-search-open'); //搜索
var vp_head_search_input = $('.vp-head-search-input') //input

//
vp_head_search_input.css('width', '0px')

vp_head_search_open.on('click', function() {
	var vp_head_search_recommend = $('.vp-head-search-recommend dl dd') //input下的那一坨子
	// console.log(vp_head_search_recommend);
	vp_head_search_wrap.css('height', '337px');
	vp_head_search_input.css('width', '600px')
	vp_head_search_input.addClass('animate__animated');
	vp_head_search_input.addClass('animate__bounceInLeft');
	vp_head_search_recommend.addClass('animate__animated');
	vp_head_search_recommend.addClass('animate__bounceInRight');
	// vp_head_search_open.offset().left= -70px;
	vp_head_search_open.css('transform', 'translateX(-228px)');
	vp_head_search_open.after(`
	<a class="vp-head-search-open-x">
	<svg t="1665716734140" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2945" width="28" height="28"><path d="M547.2 512l416-416c9.6-9.6 9.6-25.6 0-35.2s-25.6-9.6-35.2 0l-416 416-416-416c-9.6-9.6-25.6-9.6-35.2 0s-9.6 25.6 0 35.2l416 416-416 416c-9.6 9.6-9.6 25.6 0 35.2s25.6 9.6 35.2 0l416-416 416 416c9.6 9.6 25.6 9.6 35.2 0s9.6-25.6 0-35.2L547.2 512z" p-id="2946"></path></svg>
	</a>
	`);
	var vp_head_search_open_x = $('.vp-head-search-open-x');
	vp_head_search_open_x.on('click', function() {
		vp_head_search_open.css('transform', 'translateX(0px)');
		vp_head_search_input.css('width', '0px')
		vp_head_search_input.removeClass('animate__animated');
		vp_head_search_input.removeClass('animate__bounceInLeft');
		vp_head_search_recommend.removeClass('animate__animated');
		vp_head_search_recommend.removeClass('animate__bounceInRight');
		vp_head_search_wrap.css('height', '1px');
		vp_head_search_open_x.remove()
	})

})
// 轮播图
var homeSwiperImages = ['../img/vivo/2022082916012378261_original.jpg',
	'../img/vivo/20220831194427312353_original.jpg',
	'../img/vivo/20221011173844406948_original.jpg',
	'../img/vivo/20221010143418685160_original.jpg',
	'../img/vivo/2022101117220423144_original.jpg',
]
var homeSwiper = $('.home-swiper a img');
var homeSwiperIndex = 0;
// 根据图片添加分页器
var homeSwiperPage = $(` <div class="pager"></div>`)
for (var i = 0; i < homeSwiperImages.length; i++) {
	var homeSwiperPage = $(` <div class="pager"></div>`)
	homeSwiperPage.appendTo($('.home-swiper .pager-box'))
}
$('.home-swiper .pager-box .pager').eq(0).addClass('active');
// 点击分页器切换
$('.home-swiper .pager-box .pager').click(function() {
	$('.home-swiper .pager-box .pager').each(function(index, item) {
		$(item).removeClass('active')
	})
	$(this).addClass('active');
	homeSwiperIndex = $(this).index();
	homeSwiper.attr('src', homeSwiperImages[homeSwiperIndex]);
	clearInterval(homeSwiperInter)
	homeSwiperInterFun()
})



// 自动切换
function homeSwiperInterFun() {
	homeSwiperInter = setInterval(function() {
		homeSwiperIndex++;
		homeSwiper.attr('src', homeSwiperImages[homeSwiperIndex]);
		if (homeSwiperIndex >= homeSwiperImages.length) {
			homeSwiperIndex = 0;
		}
		$('.home-swiper .pager-box .pager').each(function(index, item) {
			$(item).removeClass('active')
		})
		$($('.home-swiper .pager-box .pager')[homeSwiperIndex]).addClass('active')
	}, 2000)
}
homeSwiperInterFun()

var categoricalData = function() {
	return Mock.mock({
		'records|4-15': [{
			'src': '@image(52)',
			'name': '@ctitle(3,5)'
		}]
	})
}

var categorieDatas = [{
		name: '手机',
		data: categoricalData()
	},
	{
		name: ' 平板手表 ',
		data: categoricalData()
	},
	{
		name: ' 手机充电 ',
		data: categoricalData()
	},
	{
		name: ' 手机配件 ',
		data: categoricalData()
	},
	{
		name: ' 音乐设备 ',
		data: categoricalData()
	},
	{
		name: ' 智能硬件 ',
		data: categoricalData()
	},
	{
		name: ' 游戏摄影 ',
		data: categoricalData()
	},
	{
		name: '出行车品',
		data: categoricalData()
	},
	{
		name: '配件',
		data: categoricalData()
	},
	{
		name: ' 日用出行 ',
		data: categoricalData()
	},
]


// console.log(categorieDatas);
categorieDatas.forEach(function(item, index) {
	// 生成分类
	var categorieBox = $(`<div class="categorie-box">
            <div class="categorie">
                <a href="">
                    <div class="categorie-name">${item.name}</div>
                </a>
            </div>
            <div class="categorie-ico-box">
                <div class="categorie-ico iconfont icon-jiantouxia">
				<svg t="1666019620753" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2531" width="16" height="16"><path d="M761.6 489.6l-432-435.2c-9.6-9.6-25.6-9.6-35.2 0-9.6 9.6-9.6 25.6 0 35.2l416 416-416 425.6c-9.6 9.6-9.6 25.6 0 35.2s25.6 9.6 35.2 0l432-441.6C771.2 515.2 771.2 499.2 761.6 489.6z" p-id="2532"></path></svg>
				</div>
            </div>
        </div>`)
	categorieBox.appendTo($('.all-categories .categories'));
})

//划入分类切换商品 
$('.all-categories .categories .categorie-box').mouseenter(function(index) {
	$('.all-categories .commodities-con').removeClass('none');
	$('.all-categories .commodities').html(` 
    <div class="view-all">
                  
        </div>`)
	var dataIndex = $(this).index();
	let srcs = [
		"../img/vivo/10006995_1636700606575_530x530.png.webp",
		"../img/vivo/0b85e061dd33b4516c9a49f2a888b05c.png",
		"../img/vivo/10002872_1629456926630_750x750.png.jpg"
	]
	categorieDatas[dataIndex].data.records.forEach(function(item2) {
		let i = Math.floor(Math.random() * 3)
		// console.log(item2);
		var commodityBox = $(` <div class="commodity-box">
            <a href="">
                <div class="commodity-img">
                <img src=${srcs[i]}  style="width: 52px;height:52px" alt="">
                </div>
            </a>
            <a href="" style="width: 100%;">
                <div class="commodity-text red">${item2.name}</div>
            </a>
        </div>`)
		commodityBox.insertBefore($('.all-categories .commodities  .view-all '))

	})
})
$('.all-categories .categories .categorie-box').mouseleave(function() {
	$('.all-categories .commodities-con').addClass('none');
})

// 划入商品显示 划出隐藏
$('.all-categories .commodities-con').mouseenter(function() {
	$('.all-categories .commodities-con').removeClass('none');
})
$('.all-categories .commodities-con').mouseleave(function() {
	$('.all-categories .commodities-con').addClass('none');
})
//箭头切换
$('.vp-head-product-prev').attr('disabled')
$('.vp-head-product-prev').click(function() {
	console.log('++');
	$('.vp-head-series-wrapper>ul').addClass("l")
	$('.vp-head-series-wrapper>ul').removeClass("r")
	$('.vp-head-product-prev').attr('disabled')
})
$('.vp-head-product-next').click(function() {
	
	$('.vp-head-product-next').attr('disabled')
	$('.vp-head-product-prev').removeAttr('disabled')
	$('.vp-head-series-wrapper>ul').addClass("r")
	$('.vp-head-series-wrapper>ul').removeClass("l")
})
//四个手机移动

// $('.it').each(function(iteam){
$('.it').mouseenter(function() {
	$(this).children().eq(0).children().eq(0).css('left', '10%');
	$(this).children().eq(0).children().eq(2).css('left', '45%');
	$(this).children().eq(0).children().eq(3).css('left', '60%');
})
$('.it').mouseleave(function() {

	$('.it .iteam1').css('left', '29%');
	$('.it .iteam3').css('left', '29%');
	$('.it .iteam4').css('left', '43%');
})
//划入显示手机菜单

$('.vp-head-series').mouseenter(function() {

	$(".vp-head-menu-series").css('height', '320px')
})
$(".vp-head-menu-series").mouseleave(function() {

	$('.vp-head-menu-series').css('height', '0px');
	$('.vp-head-series-wrapper>ul').removeClass("r")
})
//限时秒杀倒计时
let time = 59
$(".v-count-down .bolder").eq(2).text(time)

setInterval(function() {
	time -= 1;
	$(".v-count-down .bolder").eq(2).text(time)
	if (time == 0) {
		$(".v-count-down .bolder").eq(1).text(9)
		time = 60
	}

}, 1000)
$(function() {
	$("#swiper-wrapper-3a48c3b610a2a173f").css("transform", "translate3d(0px, 0px, 0px)")

})
//限时秒杀倒计时end

//向上
$(window).scroll(function(e) {
	// console.log($(document).scrollTop());

	if ($(document).scrollTop() > 400) {
		$("#xss").css("display","block")
		$("#xs").css("opacity", "1")
	} else {
		$("#xss").css("display","none")
		$("#xs").css("opacity", "0")
	}

	$("#xs").click(() => {
		// $(document).scrollTop(0)
		let i = $(document).scrollTop()
		let j = setInterval(() => {
			i -= 100;
			$(document).scrollTop(`${i}`)
			if ($(document).scrollTop() <= 10) {
				clearInterval(j)
			}
		}, 50)
	})
})


//向上end
// 精品配件
let goods =
	Mock.mock({
		'data|8': [{
			"id|+1": 0,
			"name": "@cword(3,5)",
			"src|1" :[
				"../img/vivo/10007566_1656923965048_750x750.png.jpg",
				"../img/vivo/10007073_1640069349502_250x250.png.jpg",
				"../img/vivo/10007475_1653651557950_750x750.png.jpg",
				"../img/vivo/10007429_1652772233233_750x750.png.jpg",
				"../img/vivo/10007339_1650436536314_750x750.png.jpg",
				"../img/vivo/10007323_1649930004598_250x250.png.jpg",
				"../img/vivo/10007556_1656313299254_250x250.png.jpg",
				"../img/vivo/10007517_1660045075825_250x250.png.jpg",
				"../img/vivo/10007760_1663732038512_250x250.png.jpg",
			],
			"desc": "@csentence(5,7)",
			"price|999-9999": 1
		}]

	})

// console.log(goods);
goods.data.forEach(item => {
	$("#box-list").append($(`
		<li class="box" data-id="${item.id}">
			<a href="../html/details.html">
				<img src="${item.src}" ></a>
				<div class="prodinfo">
					<p class="name">${item.name}</p>
					<p class="feature">${item.desc}</p>
					<p class="price rmb-symbol"> ${item.price} </p>
				</div>
		</li>
	`))
})

// 精品配件end
